<template>
	<div id="home" class="wrapper">
		<!-- 顶部 -->
		<nav-bar class="nav-home"><div slot="center">购物街</div></nav-bar>
		<!-- tab-Control1 -->
		<tab-control :titles="['流行', '新款', '精选']"
								 @tabClick="tabcotrol" 
								 ref="tabControl1"
								 class="tab-Control" 
								 v-show="isTabFixed"
		/>
		<!-- Scroll上下滚动 -->
		<scroll class="content"  ref="scroll" 
					  :probe-type="3"
					  @scroll="contentScroll"
					 :pull-up-load="true" 
					 @pullingUp="loadMore"		
		>
			<!-- 轮播图 -->
			<home-swiper :banners="banners" @swiperImageload="swiperImageload"></home-swiper>
			<!-- 推荐商品 -->
			<recommend-view :recommends="recommends"></recommend-view>
			<feature-view/>
			<!-- tab-Control2 -->
			<tab-control :titles="['流行', '新款', '精选']" 
									 @tabClick="tabcotrol" 
									 ref="tabControl2"/>
			<goods-list :goods="goods[currentType].list"/>	
			<goods-list :goods="showGoods"/>
		</scroll>
		<!-- 一箭回到顶部 -->
		<back-top @backtop="BackTop" v-show="isShowTop"/>
	</div>
</template>

<script>	
		import HomeSwiper from './childComps/HomeSwiper.vue'
		import RecommendView from './childComps/RecommendView.vue'
		import FeatureView from './childComps/FeatureView.vue'		
		import NavBar from 'components/common/navbar/NavBar'
		import tabControl from 'components/content/tabControl/TabControl.vue'
		import GoodsList from 'components/content/goods/GoodsList.vue'
		import Scroll from 'components/common/scroll/Scroll.vue'
		import BackTop from 'components/content/backTop/BackTop.vue'
		
		import {debounce} from 'common/utils.js'
		import {gteHomedata,getHomeGoods} from 'network/home'
	
	export default{
		name:'Home',
		components: {			
			HomeSwiper,
			RecommendView,
			FeatureView,		
			NavBar,
			tabControl,
			GoodsList,
			 Scroll,
			BackTop
		},
		data(){
			return{
				//保存数据
				banners:[],//轮播图
				recommends:[],
				// 流行, 新款, 精选  数据保存   加载的页数  保存的加载的数据
				goods:{
					'pop':{page: 0, list:[]},
					'new':{page: 0, list:[]},
					'sell':{page: 0, list:[]}
				},
				currentType:'pop',
				isShowTop:false,
				tabOffsetTop: 0,
				isTabFixed: false ,//默认不吸顶
				savey: 0
			}
		},
		computed:{
			showGoods(){
				return this.goods[this.currentType].list
			}
		},
		created() {
			//1.请求多个数据
			this.getHomeMultidata()
			
			//2、请求商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')	
		},
		mounted() {
			//监听item中图片加载完成
			const refresh = debounce(this.$refs.scroll.refresh, 50)
			this.$bus.$on('itemimageLoad', () => {				
				refresh()
			})
		},
		//创建
		destroyed(){
			console.log('销毁')
		},
		//重新回来
		activated() {
			this.$refs.scroll.scrollTo(0, this.savey)		
			this.$refs.scroll.refresh() //刷新
		},
		//退出
		deactivated() {
			this.savey = this.$refs.scroll.getScrollY()
		},
		methods:{
			/**
			 * 事件监听相关的方法
			 * 
			 */
			//商品
			tabcotrol(index){
				switch(index){
					case 0:
						this.currentType = 'pop'
					break;
					case 1:
						this.currentType = 'new'
					break;
					case 2:
						this.currentType ='sell'
						break;
						}
				this.$refs.tabControl1.currentIndex = index;
				this.$refs.tabControl2.currentIndex = index;
			},
			//
			BackTop(){
			this.$refs.scroll.scrollTo(0, 0)	
					
			},
			//一件回到顶部
			contentScroll(position){
				//先把负值转成正值大于1000就显示出来
				//1.判断BackTop是否显示
				this.isShowTop = (-position.y) > 1000
				
				//2.决定tabControl是否吸顶(position: fixe)
				this.isTabFixed = (-position.y) > this.tabOffsetTop
			},
			//上拉加载更多
			loadMore(){
				this.getHomeGoods(this.currentType)//先监听图片什么时候加载完成
				//this.$refs.scroll.scroll.refresh() //图片加载完后再从新刷新高度
			},	  
			swiperImageload(){
				//把获取的这个是值this.$refs.tabControl.$el.offsetTop 保存到tabOffsetTop这里面
				this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
			
			},
			/**
			 * 网络封装请求相关的方法
			 * 
			 */
			getHomeMultidata(){
				gteHomedata().then(res => {
					//取出数据
					this.banners = res.data.data.banner.list;
					this.recommends = res.data.data.recommend.list;
				})
			},
			getHomeGoods(type) {
				//动态获取页码
				const page = this.goods[type].page + 1			
				getHomeGoods(type, page).then(res => {
					//保存数据				扩展运算符
					this.goods[type].list.push(...res.data.data.list)
					this.goods[type].page += 1
					
					//来这里调用一下scroll.finishPullUp()方法，
					//调用多次上拉加载
					this.$refs.scroll.finishPullUp()
					 
				})				
			}
		}
 }
</script>
<style scoped>
	#home{
 		height:100vh;
		/* padding-top: 44px; */
	/*方案2 */
		/* position: relative; */
	
	}
	.nav-home{
		background-color: #FF5577;
		color: #fff;
		/* 在使用浏览器原生滚动时，为了让导航不跟随一起滚动*/
	/* 	position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10; */
	}
	/* 方案1 */
.content{
	height: calc(100% - 93px);
	overflow: hidden;
}

/* 方案2 */
/* .content{
	overflow: hidden;
	position: absolute;
	top: 44px;
	bottom: 49px;
	left: 0;
	right: 0;
} */

</style>
